<script setup lang='ts'>
import { getFilterCinema, getCiname } from '@/api/index'
import { ref, watch } from 'vue'

import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

// 在pinia 获取城市
const counterStore = useCounterStore()
const { cityId } = storeToRefs(counterStore)
// 筛选条件
// 区域
const active = ref(0)
const sidebarActive = ref(0)

const district = ref([])
const subway = ref([])
const districtIndex = ref(0)
const subwayIndex = ref(0)

const filterDis = ref(-1)

// 品牌
const brand = ref([])
const filterBrand = ref(-1)
// 特色
const filterHallType = ref(-1)
const filterService = ref(-1)
const hallType = ref([])
const service = ref([])

// 获取影院筛选条件
const filterList = ref(null)
getFilterCinema(cityId.value).then((res) => {
  console.log(res.data)
  filterList.value = res.data
  // 区域
  district.value = res.data.district.subItems.map((item) => {
    return { count: item.count, value: item.id, text: item.name, subItems: item.subItems }
  })
  // 地铁
  subway.value = res.data.subway.subItems.map((item) => {
    return { count: item.count, value: item.id, text: item.name, subItems: item.subItems }
  })
  console.log(subway.value)

  // 品牌
  brand.value = res.data.brand.subItems.map((item) => {
    return { count: item.count, value: item.id, text: item.name }
  })
  // 特色
  hallType.value = res.data.hallType.subItems.map((item) => {
    return { count: item.count, value: item.id, text: item.name }
  })
  // 特色功能
  service.value = res.data.service.subItems.map((item) => {
    return { count: item.count, value: item.id, text: item.name }
  })
})

// 重置
const reset = () => {
  filterHallType.value = -1
  filterService.value = -1
}
// 提交
const submit = () => {
  getCiname(
    day,
    filterDis.value,
    filterHallType.value,
    filterBrand.value,
    filterService.value,
    cityId.value
  ).then((res) => {
    // console.log(res.data);
    cinemaList.value = res.data
  })
}

// 附近影院
const cinemaList = ref(null)
let date = new Date()
const day = date.toLocaleDateString().replace(/\//g, '-')
// 日期 day 品牌 filterBrand
getCiname(
  day,
  filterDis.value,
  filterHallType.value,
  filterBrand.value,
  filterService.value,
  cityId.value
).then((res) => {
  // console.log(res.data);
  cinemaList.value = res.data
})

watch([filterDis, filterBrand], () => {
  getCiname(
    day,
    filterDis.value,
    filterHallType.value,
    filterBrand.value,
    filterService.value,
    cityId.value
  ).then((res) => {
    // console.log(res.data);
    cinemaList.value = res.data
  })
})

//12.10 17:33 引入路由模块 -lxz
import { useRouter } from 'vue-router'
// 12.10 17:33 构建路由对象 -lxz
const router = useRouter()
//12.10 17:25  前往影院详情页事件 -lxz
function ToCinema(id) {
  router.push({ path: '/cinemaDetails', query: { id: id } })
}
</script>
<template>
  <van-dropdown-menu active-color="#ee0a24">
    <van-dropdown-item title="全城" class="cinemaService">
      <van-tabs v-model:active="active" animated>
        <van-tab v-for="tab in ['商圈', '地铁站']" :title="tab">
          <template v-if="active === 0">
            <div style="display: flex; height: 380rem; overflow: scroll">
              <van-sidebar v-model="sidebarActive">
                <van-sidebar-item
                  v-for="(item, index) in district"
                  :title="item.text"
                  @click="districtIndex = index"
                />
              </van-sidebar>
              <ul>
                <li
                  v-for="item in district[districtIndex].subItems"
                  @click="filterDis = item.id"
                  :class="item.id === filterDis ? 'active' : ''"
                >
                  <p>{{ item.name }}</p>
                  <p>{{ item.count }}</p>
                </li>
              </ul>
            </div>
          </template>

          <template v-if="active === 1">
            <div style="display: flex; height: 380rem; overflow: scroll">
              <van-sidebar v-model="sidebarActive">
                <van-sidebar-item
                  v-for="(item, index) in subway"
                  :title="item.text"
                  @click="subwayIndex = index"
                />
              </van-sidebar>
              <ul>
                <li
                  v-for="item in subway[subwayIndex].subItems"
                  @click="filterDis = item.id"
                  :class="item.id === filterDis ? 'active' : ''"
                >
                  <p>{{ item.name }}</p>
                  <p>{{ item.count }}</p>
                </li>
              </ul>
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </van-dropdown-item>
    <van-dropdown-item v-model="filterBrand" :options="brand" />
    <van-dropdown-item title="特色" class="cinemaService">
      <div class="title">特殊功能</div>
      <div class="box" style="height: auto">
        <div
          v-for="item in service"
          :key="item.value"
          class="item text-ellipsis"
          :class="filterService === item.value ? 'active' : ''"
          @click="filterService = item.value"
        >
          {{ item.text }}
        </div>
      </div>
      <div class="title">特殊厅</div>
      <div class="box">
        <div
          v-for="item in hallType"
          :key="item.value"
          class="item text-ellipsis"
          :class="filterHallType === item.value ? 'active' : ''"
          @click="filterHallType = item.value"
        >
          {{ item.text }}
        </div>
      </div>
      <div style="padding: 16rem; display: flex; justify-content: space-between">
        <van-button color="#ccc" plain style="width: 88rem; height: 36rem" @click="reset"
          >重置</van-button
        >
        <van-button color="#e54847" style="width: 88rem; height: 36rem" @click="submit"
          >确认</van-button
        >f
      </div>
    </van-dropdown-item>
  </van-dropdown-menu>

  <div class="cinema" v-for="cinema in cinemaList" :key="cinema.cinemaId" @click="ToCinema(cinema.cinemaId)">
    <div class="title text-ellipsis">
      <h4>{{ cinema.title }}</h4>
      <p class="text-ellipsis" v-for="(price, index) in cinema" :key="index">
        {{ price.n }} <span>{{ price.q }}</span>
      </p>
    </div>
    <p class="location text-ellipsis">{{ cinema.location }}</p>
    <div class="services">
      <div
        class="item"
        :class="service.code === 'snack' ? 'goods' : service.code === 'vipTag' ? 'goods' : ''"
        v-for="(service, index) in cinema.services"
        :key="index"
      >
        {{ service.text }}
      </div>
    </div>
    <div></div>
  </div>
</template>
<style lang="less" scoped>
.cinemaService {
  .title {
    font-size: 16rem;
    margin: 10rem 6rem;
    color: #777777;
  }

  .box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 140rem;
    overflow: auto;

    .item {
      font-size: 10rem;
      padding: 12rem 0;
      border: 0.5px solid #ccc;
      color: #777777;
      border-radius: 4rem;
      width: 22%;
      text-align: center;
      margin: 4rem;
    }

    .active {
      background: #fcf0f0;
      color: #f03d37;
      border: 0.02rem solid #f03d37;
    }
  }

  ul {
    overflow: scroll;

    li {
      padding: 14rem;
      font-size: 14rem;
      width: 64vw;
      display: flex;
      justify-content: space-between;
      color: #777777;

      p {
        margin: 0;
      }
    }

    .active {
      color: #e54847;
    }
  }
}

.cinema {
  padding: 14rem;
  border-bottom: 1px solid #0000000d;
  background-color: #fff;

  .title {
    display: flex;
    align-items: center;

    h4 {
      font-size: 16rem;
      font-weight: 400;
      margin: 0;
    }

    p {
      color: #e54847;
      font-size: 17rem;
      margin: 0;
      font-weight: 600;
      margin-left: 4rem;

      span {
        font-size: 14rem;
      }
    }
  }

  .location {
    color: #767676;
    font-size: 14rem;
  }

  .services {
    display: flex;
    align-items: center;

    .item {
      padding: 4rem;
      margin-right: 6rem;
      font-size: 10rem;
      border: 0.5rem solid #589daf;
      border-radius: 4rem;
      color: #589daf;
    }

    .goods {
      border: 0.5rem solid #f90;
      color: #f90;
    }
  }
}

:deep(.van-sidebar-item--select:before) {
  background-color: #e54847;
}

:deep(.van-sidebar) {
  width: 106rem;
}

// 单行文本溢出
.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

</style>